<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错题本</title>
    <style>
        /* 保持原有的样式不变 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        :root {
            --primary-color: #3b82f6;
            --primary-dark: #2563eb;
            --primary-light: #eff6ff;
            --secondary-color: #64748b;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --text-color: #1e293b;
            --text-light: #64748b;
            --border-color: #e2e8f0;
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --transition: all 0.2s ease;
        }
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.5;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-weight: 500;
            font-size: 0.875rem;
            cursor: pointer;
            transition: var(--transition);
            border: none;
        }

        .btn.primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn.primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
        }

        .btn.danger {
            background-color: var(--danger-color);
            color: white;
        }

        .btn.danger:hover {
            background-color: #dc2626;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
        }

        .form-control {
            width: 100%;
            padding: 0.625rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 0.375rem;
            font-size: 0.875rem;
            transition: var(--transition);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            padding-right: 2.5rem;
        }

        textarea.form-control {
            min-height: 120px;
            resize: vertical;
            line-height: 1.6;
        }

        .main-container {
            padding: 1.5rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 1rem;
        }

        .range-filter {
            background-color: var(--card-bg);
            border-radius: 0.5rem;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .filter-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-color);
        }

        .filter-row {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 200px;
        }

        .filter-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            font-size: 0.875rem;
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        .questions-container {
            background-color: var(--card-bg);
            border-radius: 0.5rem;
            box-shadow: var(--shadow);
            padding: 1.5rem;
        }

        .questions-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .questions-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-color);
        }

        .questions-count {
            color: var(--text-light);
            font-size: 0.875rem;
        }

        .question-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .question-card {
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            padding: 1rem;
            transition: var(--transition);
            cursor: pointer;
        }

        .question-card:hover {
            border-color: var(--primary-color);
            background-color: var(--primary-light);
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
        }

        .question-card-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }

        .question-card-title {
            font-weight: 600;
            color: var(--text-color);
            flex: 1;
            margin-bottom: 0.5rem;
        }

        .question-card-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.875rem;
            color: var(--text-light);
        }

        .question-card-content {
            color: var(--text-color);
            margin-bottom: 0.75rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .question-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.875rem;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .question-card-type {
            padding: 0.25rem 0.75rem;
            background-color: var(--primary-light);
            color: var(--primary-color);
            border-radius: 999px;
            font-size: 0.75rem;
        }

        .question-card-status {
            color: var(--danger-color);
            font-weight: 500;
        }

        .answer-info {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            width: 100%;
        }

        .your-answer {
            color: var(--danger-color);
        }

        .correct-answer {
            color: var(--success-color);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            padding: 1rem;
        }

        .modal.show {
            display: flex;
        }

        .modal-content {
            background-color: var(--card-bg);
            border-radius: 0.5rem;
            width: 100%;
            max-width: 800px;
            box-shadow: var(--shadow);
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .modal-header h3 {
            font-size: 1.25rem;
            color: var(--text-color);
        }

        .close-modal {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-light);
            transition: var(--transition);
        }

        .close-modal:hover {
            color: var(--danger-color);
        }

        .modal-body {
            padding: 1.5rem;
            overflow-y: auto;
            flex: 1;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border-color);
        }

        .detail-section {
            margin-bottom: 1.5rem;
        }

        .detail-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-color);
            font-size: 1rem;
        }

        .detail-content {
            padding: 0.75rem;
            background-color: var(--bg-color);
            border-radius: 0.375rem;
            border: 1px solid var(--border-color);
        }

        .options-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .option-item {
            padding: 0.75rem;
            border-radius: 0.375rem;
            border: 1px solid var(--border-color);
        }

        .option-item.correct {
            border-color: var(--success-color);
            background-color: rgba(16, 185, 129, 0.1);
        }

        .option-item.incorrect {
            border-color: var(--danger-color);
            background-color: rgba(239, 68, 68, 0.1);
        }

        .empty {
            color: var(--text-light);
            font-style: italic;
        }

        .paper-form-group {
            margin-bottom: 1.5rem;
        }

        .paper-form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .main-container {
                padding: 1rem;
            }

            .filter-row {
                flex-direction: column;
                gap: 0.75rem;
            }

            .question-card-header {
                flex-direction: column;
                gap: 0.5rem;
            }

            .question-card-meta {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
<div class="main-container">
    <!-- 顶部标题 -->
    <div class="header">
        <h1 class="title">错题本</h1>
    </div>

    <!-- 范围选择区域 -->
    <div class="range-filter">
        <h2 class="filter-title">范围选择</h2>
        <div class="filter-row">
            <div class="filter-group">
                <label class="filter-label">时间段</label>
                <select class="form-control" id="timeRange">
                    <option value="all">全部时间</option>
                    <option value="week">近一周</option>
                    <option value="month">近一个月</option>
                    <option value="quarter">近三个月</option>
                    <option value="halfyear">近半年</option>
                    <option value="year">近一年</option>
                </select>
            </div>
            <div class="filter-group">
                <label class="filter-label">题目类型</label>
                <select class="form-control" id="questionType">
                    <option value="all">全部类型</option>
                    <option value="选择题">选择题</option>
                    <option value="判断题">判断题</option>
                    <option value="填空题">填空题</option>
                    <option value="简答题">简答题</option>
                </select>
            </div>
            <div class="filter-group">
                <label class="filter-label">排序方式</label>
                <select class="form-control" id="sortOrder">
                    <option value="time_asc">按时间顺序（旧到新）</option>
                    <option value="time_desc">按时间倒序（新到旧）</option>
                </select>
            </div>
        </div>
        <div class="filter-actions">
            <button class="btn primary" id="resetFilter">重置</button>
            <button class="btn primary" id="applyFilter">应用筛选</button>
        </div>
    </div>

    <!-- 错题列表区域 -->
    <div class="questions-container">
        <div class="questions-header">
            <h2 class="questions-title">错题列表</h2>
            <div class="questions-actions">
                <span class="questions-count" id="questionsCount">共 0 道错题</span>
                <button class="btn primary" id="generatePaperBtn" style="margin-left: 1rem;">生成试卷</button>
            </div>
        </div>

        <div class="question-list" id="questionList">
            <!-- 错题卡片将通过JS动态生成 -->
        </div>
    </div>
</div>

<!-- 错题详情弹窗 -->
<div id="questionDetailModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalQuestionTitle">题目详情</h3>
            <button class="close-modal" id="closeDetailModal">&times;</button>
        </div>
        <div class="modal-body" id="modalQuestionContent">
            <!-- 详情内容将通过JS动态生成 -->
        </div>
        <div class="modal-footer">
            <button class="btn primary" id="redoQuestionBtn">我会啦！</button>
            <button class="btn primary" id="closeModalBtn">关闭</button>
        </div>
    </div>
</div>

<!-- 生成试卷弹窗 -->
<div id="generatePaperModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>生成错题试卷</h3>
            <button class="close-modal" id="closePaperModal">&times;</button>
        </div>
        <div class="modal-body">
            <div class="paper-form-group">
                <label class="paper-form-label">考试发布时间</label>
                <input type="datetime-local" class="form-control" id="releaseTime" required>
            </div>
            <div class="paper-form-group">
                <label class="paper-form-label">考试时长（分钟）</label>
                <input type="number" class="form-control" id="examDuration" min="10" max="180" value="60" required>
                <small style="color: var(--text-light); margin-top: 0.5rem; display: block;">请输入10-180之间的数值</small>
            </div>
            <div class="paper-form-group">
                <label class="paper-form-label">包含题目数量</label>
                <p id="questionCountInfo" style="margin: 0; color: var(--text-color);">将包含 <span id="paperQuestionCount">0</span> 道错题</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn primary" id="cancelPaperBtn">取消</button>
            <button class="btn primary" id="confirmPaperBtn">确认生成</button>
        </div>
    </div>
</div>

<!-- 确认操作弹窗 -->
<div id="confirmModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="confirmTitle">确认操作</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body">
            <p id="confirmMessage"></p>
        </div>
        <div class="modal-footer">
            <button class="btn primary" id="cancelActionBtn">取消</button>
            <button class="btn danger" id="confirmActionBtn">确认</button>
        </div>
    </div>
</div>

<!-- 通用提示弹窗 -->
<div id="alertModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="alertTitle">提示</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body">
            <p id="alertMessage"></p>
        </div>
        <div class="modal-footer">
            <button class="btn primary" id="confirmAlertBtn">确定</button>
        </div>
    </div>
</div>
<!-- 引入JavaScript文件 -->
<script src="../static/js/jquery.js"></script>
<script src="../static/js/errornote.js"></script>

</body>
</html>
